<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"  type="password"/>
      </el-form-item>
      <el-form-item label="角色" prop="roleIds">
        <el-select
      v-model="ruleForm.roleIds"
      placeholder="请选择"
      style="width: 240px"
    >
      <el-option
        v-for="item in roleList"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
      />
    </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增用户
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import  { ElMessage, ElMessageBox } from 'element-plus'
  import axios from 'axios';
  
  interface RuleForm {
    userName: string
    password: string
    roleIds: []
    
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    userName:'',
    password:'',
    roleIds: []
  })
  
  interface roleIds{
    "roleId":number,
    "roleName":string,
  }
const roleList=ref<roleIds[]>([])
  onMounted(()=>{
    getroles();
  })

const getroles=()=>{
    axios.get('http://localhost:5072/api/RBAC/ShowUserAndRole')
    .then(res=>{
        console.log(res)
        roleList.value=res.data.data
    })
    .catch(err=>{
        console.log(err)
    })
}



  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    userName: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change',
      },
    ],
    roleIds: [
      {
        required: true,
        message: '请选择角色',
        trigger: 'change',
      },
    ],
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        axios.post('http://localhost:5044/api/RBAC/AddUserToRole',ruleForm)
        .then(res=>{
            console.log(res)
            if(res.data.isSuc)
            {
                ElMessage.success('新增用户成功')
            }
            else{
                ElMessage.error(res.data.msg)
                return
            }
        })
        .catch(err=>{
            console.log(err)
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
</script>
  